﻿<!DOCTYPE html>
<html>
<head>
  <title>Simply Weather</title>
  <link rel="stylesheet" type="text/css" href="css/base.css" />
  <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="scripts/knockout-2.1.0.js"></script>
  <script type="text/javascript" src="scripts/app.js"></script>
</head>
<body>
  <div id="container">
    <div id="city" data-bind="text: city">loading...</div>
    <div id="current">
      <span id="temperature" data-bind="text: temperature() + '&deg;', visible: temperature"></span>
      <span id="condition" data-bind="text: condition, visible: condition"></span>
    </div>
    <div id="alerts"></div>
    <div id="humidity" data-bind="visible: humidity"><img id="nextformat" src="images/next.png" />Humidity: <span data-bind="text: humidity"></span>%</div>
    <div id="wind" data-bind="visible: wind"><img id="colorsimg" src="images/color_picker.png" />Wind: <span data-bind="text: wind"></span></div>
    <div id="format0">
      <table>
        <tr>
          <td data-bind="text: forecast0_day, visible: forecast0_day"></td>
          <td data-bind="text: forecast1_day, visible: forecast1_day"></td>
          <td data-bind="text: forecast2_day, visible: forecast2_day"></td>
          <td data-bind="text: forecast3_day, visible: forecast3_day"></td>
        </tr>
        <tr>
          <td><img data-bind="attr: {src: forecast0_icon, tip: forecast0_condition}, visible: forecast0_icon" /></td>
          <td><img data-bind="attr: {src: forecast1_icon, tip: forecast1_condition}, visible: forecast1_icon" /></td>
          <td><img data-bind="attr: {src: forecast2_icon, tip: forecast2_condition}, visible: forecast2_icon" /></td>
          <td><img data-bind="attr: {src: forecast3_icon, tip: forecast3_condition}, visible: forecast3_icon" /></td>
        </tr>
        <tr>
          <td data-bind="html: forecast0_high() + '&deg;', visible: forecast0_high" class="temp"></td>
          <td data-bind="html: forecast1_high() + '&deg;', visible: forecast1_high" class="temp"></td>
          <td data-bind="html: forecast2_high() + '&deg;', visible: forecast2_high" class="temp"></td>
          <td data-bind="html: forecast3_high() + '&deg;', visible: forecast3_high" class="temp"></td>
        </tr>
        <tr>
          <td data-bind="html: forecast0_low() + '&deg;', visible: forecast0_low" class="temp"></td>
          <td data-bind="html: forecast1_low() + '&deg;', visible: forecast1_low" class="temp"></td>
          <td data-bind="html: forecast2_low() + '&deg;', visible: forecast2_low" class="temp"></td>
          <td data-bind="html: forecast3_low() + '&deg;', visible: forecast3_low" class="temp"></td>
        </tr>
      </table>
    </div>
  </div>

  <div id="format2">
    <table>
      <tr>
        <td data-bind="text: forecast0_day, visible: forecast0_day"></td>
        <td data-bind="text: forecast0_condition, visible: forecast0_condition"></td>
        <td data-bind="html: forecast0_high()+'&deg;<br/>'+forecast0_low()+'&deg;', visible: forecast0_high"></td>
      </tr>
      <tr>
        <td data-bind="text: forecast1_day, visible: forecast1_day"></td>
        <td data-bind="text: forecast1_condition, visible: forecast1_condition"></td>
        <td data-bind="html: forecast1_high()+'&deg;<br/>'+forecast1_low()+'&deg;', visible: forecast1_high"></td>
      </tr>
      <tr>
        <td data-bind="text: forecast2_day, visible: forecast2_day"></td>
        <td data-bind="text: forecast2_condition, visible: forecast2_condition"></td>
        <td data-bind="html: forecast2_high()+'&deg;<br/>'+forecast2_low()+'&deg;', visible: forecast2_high"></td>
      </tr>
      <tr>
        <td data-bind="text: forecast3_day, visible: forecast3_day"></td>
        <td data-bind="text: forecast3_condition, visible: forecast3_condition"></td>
        <td data-bind="html: forecast3_high()+'&deg;<br/>'+forecast3_low()+'&deg;', visible: forecast3_high"></td>
      </tr>
    </table>
  </div>

  <div id="format3"></div>

</body>
</html>
